<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>John Doe</small>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
repellendus nostrum harum, quis cupiditate molestiae, voluptates quam
beatae odit autem incidunt voluptatibus? Provident, suscipit. Iusto
facere dolorum quis asperiores illo earum vel sit modi dicta nulla?
Est, odio quibusdam quidem earum magni et placeat voluptate officia
non inventore eaque optio dolores accusantium similique repudiandae
alias temporibus quae sequi quam quia sapiente! Dignissimos esse
possimus numquam laborum nemo minus, sequi doloribus porro quia,
fugiat aperiam optio dolores? Nemo quia adipisci reiciendis provident?
Architecto molestias qui a ut placeat, dolorum similique fuga facilis
modi suscipit perferendis blanditiis temporibus iusto repudiandae
ipsam officiis.
</p>
<h2>My Subtitle</h2>
<img
src="https://images.unsplash.com/photo-1610308354580-0108c064a578?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80"
/>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti
excepturi est odio, veniam earum pariatur unde culpa, libero deserunt
iure eligendi dolorem aperiam enim deleniti quibusdam omnis
repudiandae dolor distinctio numquam dicta magni? Harum hic dolorem
veniam, dolore minima earum blanditiis rerum similique illum quibusdam
culpa soluta ullam nesciunt repudiandae dolor! Exercitationem
repellendus, nostrum illo commodi est dignissimos veniam numquam,
consectetur fugiat doloremque soluta odio enim iusto repudiandae
tenetur aliquid voluptatem. Deserunt nam praesentium atque.
</p>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-user-alt"></i> About</li>
<li><i class="fas fa-envelope"></i> Contact</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>